<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		body{
			font-size:9pt;
		}
		#real_image_container{
			position:absolute;
			width:300px;
			height:200px;
			top:100px;
			left:100px;
			border:1px solid #ff0000;
		}
		#real_image_container #real_image{
			position:absolute;
			background:#000000;
			opacity:0.8;
		}
		
		#image_container{
			position:absolute;
			width:300px;
			height:200px;
			top:100px;
			left:500px;
			border:1px solid #ff0000;
		}
		
		#image_container #image_canvas{
			position:absolute;
			background:#0000ff;
		}
		
		
		#image_info{
			position:absolute;
			top:80px;
			left:100px;
		}
	</style>
	<script  type="text/javascript"  src="../libs/jquery-1.7.1.min.js"></script>
	<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
	
	<script>
	
		var $imageContainer;
		var $imageInfo;
		var nContainerWidth;
		var nContainerHeight;
		var $imageCanvas;
		var $realImage;
		window.onload = function(){
			// 기본정보 초기화하기.
			init();
			// 테스트 시작.		
			startTimer();
		}
		
		// 기본 정보 초기화 하기.
		function init(){
			// 이미지 컨테이너를 재사용하기 위해서 미리 찾아 변수에 담아놓는다.
			this.$imageContainer = $("#image_container");
			
			// 이미지 컨테이너의 너비와 높이도 미리 구해논다.
			this.nContainerWidth = this.$imageContainer.width();
			this.nContainerHeight = this.$imageContainer.height();
			
			// 이미지  캔버스 역시 계속사용하기 때문에, 미리 찾아 변수에 담아놓음.
			this.$imageCanvas = $("#image_canvas");
			
			// 이미지 캔버스의 크기를 이미지 컨테이너 크기로 초기화 시킴.
			this.$imageCanvas.width(this.nContainerWidth);
			this.$imageCanvas.height(this.nContainerHeight);
			
			// 구해지는 이미지 정보를 확인하기 위한 임시 엘리먼트.
			this.$imageInfo = $("#image_info");
			
			// 실제 이미지 크기를 나타낼 엘리먼트.
			this.$realImage = $("#real_image");
		}
			
		// 타이머 시작.
		function startTimer(){
			// 2초에 한번씩 이미지 라사이징 실행시키기.
			setInterval(randomResizing,2000);
		}
		
		// 종횡비에 따른 이미지 리사이징 처리하기.
		function randomResizing(){
			//이미지의  width,height값을 램덤하게 구한다.
			var nWidth = 100+Math.floor(Math.random()*300);
			var nHeight = 50+Math.floor(Math.random()*250);
			
			// 실제 이미지 엘리먼트의 크기를 설정한다.
			this.$realImage.width(nWidth);
			this.$realImage.height(nHeight);
			
		
			/*  이미지 조절하기 */
			// 이미지 컨테이너 : 신규 이미지 종횡비에 따른 이미지 크기와 위치값 구하기.
			var sizeInfo = this.getImageResizingInfo(nWidth, nHeight);
			
			// 컨테이너 크기에 벗어나지 않고 비율에 맞게 이미지 크기와 위치를 부드럽게 조절하기.
			this.$imageCanvas.animate(sizeInfo,300, "easeOutQuint", function(){
				
				// 이곳에는 애니메이션이 끝나면 로드한 이미지를 서서히 나오도록 fadeIn 효과(opacity값을 0 ->1)를 구현할거랍니다.
			
			});
			
			// 알아낸 리사이징 정보 출력하기.
			$imageInfo.html("realWidth="+nWidth+",realHeight="+nHeight+",newWidth="+sizeInfo.width+", newHeight="+sizeInfo.height+",newLeft="+sizeInfo.left+",newTop="+sizeInfo.top);	
		}
		
		// 이미지 리사징정보 구하기.
		function getImageResizingInfo(nImageWidth, nImageHeight){
			var objSizeInfo = {
				width: 0,
				height: 0,
				top:0,
				left:0
			};
			// 이미지 너비, 높이가 모두 컨테이너 너비,높이보다 작은경우,
			if (this.nContainerWidth > nImageWidth && this.nContainerHeight > nImageHeight) {
				// 이미지위치만 업데이트 시킴.	
				objSizeInfo.width = nImageWidth;
				objSizeInfo.height = nImageHeight;			
			}
			else {
				// 이미지 너비, 높이가 모두 컨케이너 너비,높이보다 큰 경우
				
				// 기준이 되는  프로퍼티를 결정하기 위해서 너비와 높이의 비율값을 구한다.
				var nTempWidth = this.nContainerWidth / nImageWidth;
				var nTempHeight = this.nContainerHeight / nImageHeight;
				
				// 너비,높이 비율값중  큰 값이 기준이 되며, 나머지는 비율값에 따른 값을 구함. 
				if (nTempHeight <= nTempWidth) {
					// 기준값을 컨테이너 높이로 하고, 이때 비율에 따른 이미지 너비값을 구한다.
					objSizeInfo.width = this.getImageWidth(this.nContainerHeight, nImageWidth, nImageHeight);
					objSizeInfo.height = this.nContainerHeight;
				}
				else {
					// 기준값을 컨테이너 너비로 하고, 이때 비율에 따른 이미지 높이값을 구한다.
					objSizeInfo.width = this.nContainerWidth;
					objSizeInfo.height = this.getImageHeight(this.nContainerWidth, nImageWidth, nImageHeight);
				}
			}
		
			// 이미지가 가운데로 정렬되도록 위치값을 구한다.
			objSizeInfo.left = Math.floor((this.nContainerWidth-objSizeInfo.width)/2);
			objSizeInfo.top = Math.floor((this.nContainerHeight-objSizeInfo.height)/2);
			
			return objSizeInfo;
		}
		
		// 비율에 따른 이미지 너비값 구하기.
		function getImageWidth(nContainerHeight, nImageWidth, nImageHeight)
		{
			/*
			공식 구하기. 
				X(새로운이미지width) : 컨테이너.height = 이미지.width: 이미지.height
				이기 때문에
				X*이미지.height = 컨테이너.height*이미지.width
				X = (컨테이너.height*이미지.width)/이미지.height가 됩니다.
			*/
			return Math.floor((nContainerHeight*nImageWidth)/nImageHeight);
		}
		
		// 비율에 따른 이미지 높이값 구하기.
		function getImageHeight(nContainerWidth, nImageWidth, nImageHeight)
		{
			/*
			공식 구하기. 
				컨테이너.width : X(새로운이미지height)= 이미지.width: 이미지.height
				이기 때문에
				X(새로운이미지.height)*이미지.width = 컨테이너.height*이미지.width
				X = (컨테이너.width*이미지.height)/이미지.width가 됩니다.
			*/
			return Math.floor((nContainerWidth*nImageHeight)/nImageWidth);
		}
	</script>
</head>

<body>
	<div id="real_image_container">
		<div id="real_image">
		</div>
	</div>
	<div id="image_container">			
		<div id="image_canvas">
		</div>	
	</div>
	<div id="image_info"></div>
</body>
</html>
